{% extends 'layout.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css' %}">
{% endblock %}

{% block content %}
    <div class="container">

            <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">新增用户</h3>
            </div>
            <div class="panel-body">
                {% comment %} 在 https://v3.bootcss.com/css/#forms 全局css样式 - 表单 里 {% endcomment %}
                <form method="post" novalidate>  {#action="/info/add/" 可以省略，默认提交到当前url请求; novalidate: 关闭浏览器校验 #}
                    {% csrf_token %}

                    {% for field in form %}
                        <div class="form-group">
{#                            <label>姓名</label>#}
{#                            <input type="text" class="form-control" placeholder="姓名" name="testuser">#}
                            <label>{{ field.label }}</label>
                            {{ field }}
                            <!-- 如果有报错信息，只显示第一条 -->
                            <span style="color: red;">{{ field.errors.0 }}</span>
                        </div>
                    {% endfor %}

                    <button type="submit" class="btn btn-primary">保存</button>
                </form>

            </div>
        </div>

{#    <form method="post">#}
{#        {% csrf_token %}#}
{##}
{#        {{ form.name.label }}: {{ form.name }}#}
{#        {{ form.password.label }}: {{ form.password }}#}
{#        {{ form.age.label }}: {{ form.age }}#}
{#        {% for field in form %}#}
{#        	{{ field.label }}: {{ field }}#}
{#        {% endfor %}#}
{##}
{#    </form>#}

    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script type="text/javascript">
    $(function () {
        //当容器加载完成，对容器调用工具函数
        $("#id_creatime").datetimepicker({
            startDate: '0',
            language: 'zh-CN', //语言
            format: 'yyyy-mm-dd',//日期的格式
            {#minView: 'month', //可以选择的最小视图#}
            {#initialDate: new Date(),//初始化显示的日期#}
            {#autoclose: true,//设置选择完日期或者时间之后，日否自动关闭日历#}
            {#todayBtn: true,//设置自动显示为今天#}
            {#clearBtn: false//设置是否清空按钮，默认为false#}
        });
    });
</script>
{% endblock %}